<template>
   <section class="shop-list">
   	  	<el-form label-position="top" :inline="true" v-model="filter" class="demo-form-inline">
            <el-row>
                <el-col :span="4">
                    <el-form-item label="店铺ID:">
                        <el-input type="number" placeholder="Shop ID" v-model="filter.shopId" size="small"></el-input>
				    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="商品ID:">
                        <el-input type="number" placeholder="Item ID" v-model="filter.goodsId" size="small"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="创建时间:" width="100">
                        <el-date-picker
                                size="small"
                                style="width: 100%;"
                                v-model="timeInterval"
                                type="datetimerange"
                                start-placeholder="创建时间"
                                end-placeholder="创建时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="action_col">
                    <el-form-item class="action_button_group_open">
                        <el-button style="margin-top: 55px;" size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
                        </el-button>
                        <el-button style="margin-top: 55px;" size="small" type="primary" @click="submitSearch()" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="margin-table">
                <el-table :data="tableList" v-model="tableList" border style="width: 100%;">
	                <el-table-column prop="itemName"  label="商品信息" align='left' width="300">
                        <template scope="scope">
                            <a target="_blank" :href="'https://trade.onloon.net/detail?itemId='+scope.row.itemId">
                                <img class="pro-img" :src="scope.row.itemPicPath" alt="">
                                <span class="pro-name" >{{scope.row.itemName}}</span>
                            </a>
                        </template>
                    </el-table-column>
	                <el-table-column prop="highPrice"  label="价格" align='center'>
                        <template scope="scope">
                            <span v-if="scope.row.highPrice == scope.row.lowPrice">{{"$"+scope.row.highPrice}}</span>
                            <span v-else>{{"$"+scope.row.lowPrice+ "-" +"$"+scope.row.highPrice}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="commission"  label="佣金" align='center'>
                        <template scope="scope">
                            <span>{{"$"+scope.row.commission}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="shareCount"  label="分裂数" align='center'></el-table-column>
                    <el-table-column prop="shopName"  label="店铺名称" align='center'>
                        <template scope="scope">
                            <a target="_blank" :href="'https://trade.onloon.net/?shopId='+scope.row.shopId">
                                <span >{{scope.row.shopName}}</span>
                            </a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="shopId"  label="店铺ID" align='center'></el-table-column>
                </el-table>
            </el-row>
		    <el-row class="paging" style='margin-top: 40px;'>
		        <el-pagination
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                  :current-page="filter.currentPage"
                  :page-sizes="[10, 20, 50,100]"
                  :page-size="filter.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalCount">
		        </el-pagination> 
      		</el-row>
   	  	</el-form>
   </section>
</template>

<script>
	import Vue from 'vue'
	import {mapGetters} from 'vuex'
	import {Row, Col, Form, FormItem, Button ,Table,Pagination,DatePicker,TableColumn,Input,Message,MessageBox} from 'element-ui'
	import {getDate} from '../../../utils/auth'

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Button);
    Vue.use(Input);
    Vue.use(Table);
    Vue.use(DatePicker);
    Vue.use(TableColumn);
    Vue.use(Pagination);
    
    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;
    export default {
        scrollToTop: false,
    	head(){
            return {
                title: "裂变分销",
                meta: [
                    { hid: 'shopManage', name: 'shopManage', content: 'shopManage'}
                ]
            }
        },
        data() {
            return {
                tabName: '裂变分销',
                filter:{
	      			shopId:'',//品牌名称
	      			goodsId: '',
	      			highCommission:'',
                    lowCommission:'',
                    startTime: '', //添加时间开始
                    endTime: '',  //添加时间结束
	      			pageSize: 50, // 每页条数
					pageNum: 1
      		    },
                totalCount: 0,
                timeInterval: [],
      		    tableList:[],
		        listData:[],
                logPreload:{},
            };
        },
        filters: {
            formatUpdateTime(time) {
                if(!time) return '';
                let date = new Date(time);
                return getDate(date,true)
            }
        },
        methods: {
        	handleCurrentChange(val) {
                this.filter.pageNum = val;
        		this.getSearchCookieList()
	        },
	        handleSizeChange(val) {
                this.filter.pageSize = val;
				this.getSearchCookieList();
	        },
            empty(){//清空筛选条件
            	let pageSize = this.filter.pageSize;
                let pageNum = this.filter.pageNum;
                this.timeInterval = [];
	    		this.filter = {
	    			shopId:'',//品牌名称
                    goodsId: '',
                    highCommission:'',
                    lowCommission:'',
                    startTime: '', //添加时间开始
                    endTime: '',  //添加时间结束
                    pageSize: pageSize, // 每页条数
                    pageNum: 1
	    		}
	    	},
	    	submitSearch(){
	    		this.getSearchCookieList();
	    	},
	    	getSearchCookieList(){
                if(this.timeInterval&&this.timeInterval[0]){
                    this.filter.startTime = this.timeInterval[0]?getDate(this.timeInterval[0],true):'';
                    this.filter.endTime =  this.timeInterval[1]?getDate(this.timeInterval[1],true):'';
                }else{
                    this.filter.startTime = ''
                    this.filter.endTime = ''
                }
	    		this.$store.dispatch("getShareProductList",this.filter).then(res=>{
	    			if(!res) {return ;}
	    			let result=res.data;
                    this.totalCount = result.data.total;
                    //接口请求成功
	    			if(result.code == 0 && result.data){
	    				this.tableList=result.data.list;
	    				for(var i = 0; i < this.tableList.length; i++){
	    					if(this.tableList[i].checkStatus>0){
								this.tableList[i].checkStatus = "成功"; 
							}else{
								this.tableList[i].checkStatus = "失败"; 
							}
	   					}			
	    			}
	    		}).catch((error) => {})
    	    }
        },
        computed : {
            ...mapGetters({
               'pageTabsList': 'getPageTabsList',
            })
        },
        mounted() {
            // if(this.$store.state.btocShop.m_registerTimeBegin.length){
            //     this.timeInterval = [new Date(this.$store.state.btocShop.m_registerTimeBegin),new Date(this.$store.state.btocShop.m_registerTimeEnd)]
            // }
            this.getSearchCookieList();
        },
        created(){
            //pageTab
            //this.filter.shopName = this.$store.state.btocShop.m_shopName;
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
            
        }
    }
</script>

<style lang="scss">
	.shop-list{
		a, a:hover, a:focus, a:visited{
			color: #20a0ff;
		}
        .avtive-name{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
		.margin-table {
			.el-icon-close{padding-right: 20px;}
			.input_text .el-input__inner{padding-right: 25px;}
		}
		.module-opera-top{
			.el-form-item{margin-bottom: 50px !important;}
		}
		.el-form--inline .el-form-item__label{
			float: left !important;
		}
        .pro-img{
            width: 40px;
            vertical-align: middle;
        }
        .pro-name{
            padding-left: 5px;
            display: inline-block;
            width: 220px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
	}
</style>